<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书推荐网站</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #f8f9fa;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        .navbar a {
            text-decoration: none;
            color: #333;
            margin: 0 10px;
        }

        /* 搜索框样式 */
        .search-box {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .search-box input {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
        }

        .search-box button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }

        /* 图书推荐区域样式 */
        .book-recommend {
            text-align: center;
            margin: 20px 0;
        }

        .book-recommend h2 {
            margin-bottom: 20px;
        }

        .book-item {
            display: inline-block;
            width: 200px;
            margin: 0 10px;
        }

        .book-item img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <a href="#">首页</a>
        <a href="http://127.0.0.1:8848/%E7%BD%91%E4%B8%8A%E4%B9%A6%E5%BA%97%E5%94%AE%E4%B9%A6/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83-.html">个人中心</a>
        <a href="http://127.0.0.1:8848/%E7%BD%91%E4%B8%8A%E4%B9%A6%E5%BA%97%E5%94%AE%E4%B9%A6/%E8%B4%AD%E7%89%A9%E8%BD%A6.html">购物车</a>
        <a href="http://127.0.0.1:8848/%E7%BD%91%E4%B8%8A%E4%B9%A6%E5%BA%97%E5%94%AE%E4%B9%A6/%E5%AE%A2%E6%9C%8D.html">在线客服</a>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
        <input type="text" placeholder="图书名称">
        <button>搜索</button>
    </div>

    <!-- 图书推荐区域 -->
    <div class="book-recommend">
        <h2>Recommend 图书信息推荐</h2>
        <div class="book-item">
            <a href="2-图书信息1.html">
                <img src="http://img.alicdn.com/img/i2/114056866/O1CN01d0iKIw20agOiSJgR7_!!4611686018427387554-0-saturn_solar.jpg_360x360q90.jpg_.webp"
                    alt="图书1">
                <p>博弈论</p>
            </a>
        </div>
        <div class="book-item">
            <a href="2-图书信息2.html">
                <img src="http://img.alicdn.com/img/i2/127350282/O1CN01EDUUvx1DxCiASOX6R_!!4611686018427385354-0-saturn_solar.jpg_360x360q90.jpg_.webp"
                    alt="图书2">
                <p>三国演义</p>
            </a>
        </div>
        <div class="book-item">
            <a href="2-图书信息3.html">
                <img src="http://img.alicdn.com/img/i4/103562228/O1CN01YRlD9M1SKTRNz2hka_!!0-saturn_solar.jpg_360x360q90.jpg_.webp"
                    alt="图书3">
                <p>红楼梦</p>
            </a>
        </div>
    </div>
</body>

</html>